<canvas id="{{$name}}"></canvas>
<script>
$(function () {
    var ctx = document.getElementById("{{$name}}").getContext('2d');

    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [@foreach($x as $k => $v)'{{$v}}',@endforeach],
            datasets: [@foreach($data as $k => $v){
                    label: '{{$k}}',
                    data: [@foreach($v['value'] as $key => $value){{$value}},@endforeach],
                    backgroundColor:"{{$v['rgb']}}",
                    borderWidth: 1
                },@endforeach
            ]
        },
        options: {
            scaleShowGridLines : true,
            scaleGridLineColor : "rgba(0,0,0,.05)",
            scaleGridLineWidth : 1,
            scaleShowHorizontalLines: true,
            scaleShowVerticalLines: true,
            barShowStroke : true,
            barStrokeWidth : 2,
            barValueSpacing : 5,
            barDatasetSpacing : 1,
            legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
});
</script>